<tab-group new-tab-button="true" sortable="true" class="full-window">
	<style>
		:host {
			--tabgroup-background: transparent;

			/* Tab */
			--tab-font-size: var(--et-tab-font-size);
			--tab-color: var(--et-tab-color);

			--tab-background-alpha-offset: 0.5;
			--tab-background-alpha-offset-active: 0.25;

			/* Button */
			--button-font-size: 16px !important;
			--button-color: var(--button-color);
			--button-background: var(--button-background-color) !important;
			--button-border-radius: var(--sl-border-radius-large);
			--button-cursor: pointer;

			--button-hover-background: var(--button-background-color-hover);
			--button-hover-color: var(--button-color-hover);

			--close-button-visibility: visible;

			/* Badge */
			--badge-background: #383a3e;
			--badge-color: #fff;
		}
		.nav {
			-webkit-app-region: drag;

			display: flex !important;
			align-items: center;

			position: fixed;
			z-index: 10;
			top: 0px;
			left: var(--tab-nav-spacing-left);

			height: var(--top-bar-height);
			width: calc(100% - var(--tab-nav-spacing-right, 0));
			border: none;

			box-shadow: none;

			opacity: var(--top-bar-opacity, 1);
		}

		.tabs {
			display: flex;
			align-items: center;
			overflow-x: scroll;
			gap: var(--sl-spacing-2x-small);

			&::-webkit-scrollbar {
				background: transparent;
				height: 1px;
				width: 0px;
			}
			&::-webkit-scrollbar-thumb {
				background: var(--sl-color-primary-600);
			}
		}

		.tab {
			-webkit-app-region: no-drag;

			flex: none;

			height: calc(var(--top-bar-height) - (2 * var(--sl-spacing-2x-small)));
			padding: var(--sl-spacing-2x-small) var(--sl-spacing-x-small);

			background:
				linear-gradient(
					hsla(
						var(--tab-accent-color-hue),
						var(--tab-accent-color-saturation),
						var(--tab-accent-color-lightness),
						calc(
							var(--tab-accent-color-alpha) - var(--tab-background-alpha-offset)
						)
					),
					hsla(
						var(--tab-accent-color-hue),
						var(--tab-accent-color-saturation),
						var(--tab-accent-color-lightness),
						calc(
							var(--tab-accent-color-alpha) - var(--tab-background-alpha-offset)
						)
					)
				),
				var(--et-tab-background-color);
			border: 1px solid
				color-mix(
					in srgb,
					var(--tab-accent-color),
					var(--et-tab-border-color) 25%
				) !important;
			border-radius: var(--sl-border-radius-large);

			box-shadow: none;

			&.active,
			&:not(.active):hover {
				background:
					linear-gradient(
						hsla(
							var(--tab-accent-color-hue),
							var(--tab-accent-color-saturation),
							var(--tab-accent-color-lightness),
							calc(
								var(--tab-accent-color-alpha) -
									var(--tab-background-alpha-offset-active)
							)
						),
						hsla(
							var(--tab-accent-color-hue),
							var(--tab-accent-color-saturation),
							var(--tab-accent-color-lightness),
							calc(
								var(--tab-accent-color-alpha) -
									var(--tab-background-alpha-offset-active)
							)
						)
					),
					var(--et-tab-background-color-active);

				padding: var(--sl-spacing-2x-small) var(--sl-spacing-x-small);
			}

			.tab-close button {
				display: grid;
				place-content: center;

				background: none;

				&:hover {
					background: rgb(from var(--button-background) r g b / 25%);
					border-radius: var(--sl-border-radius-large);
				}
			}
		}

		.buttons {
			-webkit-app-region: no-drag;
			border: none;

			button {
				width: 32px;
				height: 32px;
			}
		}

		webview {
			height: calc(100% - var(--top-bar-height));
			position: fixed;
			bottom: 0px;
			z-index: 20;
			left: 0px;
		}
	</style>
</tab-group>
